<template>
  <div id="return" class="mt36">
    <div class="return-hd f18">
      <h2 class="fl">退款管理</h2>
    </div>
    <div class="return-main mt24">
      <ul class="filter-list f13">
        <li class="pb24 fl w320">
          <label style=" margin-top: 2%;" class="lh36 fl">订单编号</label>
          <div class="fl ml24">
            <el-input width="89px" placeholder="请输入内容" v-model="input2" clearable></el-input>
          </div>
        </li>
        <li class="pb24 ml24 fl w450">
          <label style=" margin-top: 2%;" class="lh36 fl">申请时间</label>
          <div class="ml24 fl">
            <el-date-picker
            style=" margin-top: 1%;"
              v-model="value2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
        </li>
        <li >
          <el-button  type="primary" @click="search">查询</el-button>
        </li>
      </ul>
      <div class="refund-list pt24">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed="left" prop="update_date" label="日期" width="100"></el-table-column>
          <el-table-column prop="product_name" label="商品" width="450"></el-table-column>
          <el-table-column prop="buyer_name" label="发起人" width="150"></el-table-column>
          <el-table-column prop="seller_name" label="卖家" width="150"></el-table-column>
          <el-table-column prop="shop_price" label="价格" width="100"></el-table-column>
          <el-table-column prop="show_status" label="状态" width="120"></el-table-column>
          <!-- <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input2: null,
      value2:null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      tableData: [
      ]
    };
  },
  mounted(){
    this.init()
  },
  methods:{
    init(){
      this.axios.post('/refund/list').then((resp)=>{
        this.tableData = resp.data
      })
    },
    search(){
      let start,end
      if(this.value2){
        start = this.dateFormat("YYYY-mm-dd",this.value2[0])
        end = this.dateFormat("YYYY-mm-dd",this.value2[1])
      }
      this.axios.post('/refund/list',{
       'start': start,
       'end':end,
       'order_id':this.input2
      }).then((resp)=>{
        this.tableData = resp.data
      })
    },
    dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
  }
};
</script>

<style scoped>
#return {
  width: 1080px;
  min-height: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3%;
  /* background-color: antiquewhite; */
}
/* 标题 */
.return-hd {
  height: 40px;
  overflow: hidden;
  /* background-color: aqua; */
}
.return-hd h2 {
  line-height: 41px;
}

/* 内容 */
.return-main {
  min-height: 530px;
  /* background-color: burlywood; */
}
.return-main .filter-list {
  /* height: 100px; */
  margin-bottom: 20px;
  line-height: 22px;
  overflow: hidden;
}

/* .item-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
} */
.el-input__inner {
  height: 33px;
}
.el-button--primary {
  background-color: #29a3d6;
}
.el-button--primary:hover {
  background-color: #0076a4;
}
.el-table td {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
</style>
